/* ui style rules */
#x2-window-shadow {  height: 0;  width: 0;}
body.shadowed #x2-window-shadow {  background: #999;
  height: 100%;  left: 0;
  opacity: 0.65;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 999991;}

div#x2-toolbar {  border: 1px solid #999;
  background: #f0f0f0;
  padding: 4px;
  position: fixed;
  top: 0;
  right: 0;
  opacity: 0.8;  z-index: 999990;
}

div#x2-toolbar:hover {  opacity: 1;
}

div#x2-toolbar button {  background-color: transparent;
  background-repeat: no-repeat;
  background-position: 50% 50%;
  cursor: pointer;
/*  display: block;*/
  height: 32px;
  margin: 2px;
  width: 32px;
}

div#x2-toolbar #x2-create-doc {  background-image: url(../icons/t-new.png);}

div#x2-toolbar #x2-attr-doc {
  background-image: url(../icons/t-attr.png);
}

div#x2-toolbar #x2-edit-doc {
  background-image: url(../icons/t-edit.png);
  display: none;
}

div#x2-toolbar #x2-delete-doc {
  background-image: url(../icons/t-delete.png);
}

div#x2-toolbar #x2-switch-state {}

div#x2-toolbar .on {
  background-image: url(../icons/t-on.png);
}

div#x2-toolbar .off {
  background-image: url(../icons/t-off.png);
}

div#x2-toolbar #x2-upload-file {
  background-image: url(../icons/t-upload.png);
}

div#x2-toolbar #x2-exit {
  background-image: url(../icons/t-go.png);
}

div#x2-doc-info,
div#x2-doc-info-top {  display: none;}

body.doc-info div#x2-doc-info,
body.doc-info div#x2-doc-info-top {  display: block;
  position: fixed;
  right: 60px;
  z-index: 999992;
  width: 500px;}

body.doc-info div#x2-doc-info {
  background: transparent url(../icons/dialog-bg.png) no-repeat left bottom;
  top: 10px;
}
body.doc-info div#x2-doc-info-top {
  background: transparent url(../icons/dialog-bg.png) no-repeat left top;
  height: 8px;
  top: 2px;
}

div#x2-doc-info form {  margin: 8px 12px 12px 8px;
  padding: 1em;
}

div#x2-doc-info form * {  font: Menu;}

div#x2-doc-info form input,
div#x2-doc-info form select,
div#x2-doc-info form textarea {  width: 98%;}
div#x2-doc-info form input.auto {  width: auto;}

div#x2-doc-info table {  border: 0 none;
  width: 100%;}

div#x2-doc-info table td {  padding: 2px;
  vertical-align: top;}

div#x2-doc-delete {  display: none;}
body.delete-doc div#x2-doc-delete {  border: 1px solid #999;
  background: #f0f0f0;
  display: block;
  padding: 1em 1em 2em;
  position: fixed;
  top: 10px;
  right: 60px;
  width: 480px;
  z-index: 999993;}

div#x2-doc-delete form * {
  font: Menu;
}

div.x2-field {  margin-top: 32px;  min-height: 1em;  position: relative;}

div.x2-field form button.x2-edit-block {  background: #f0f0f0 url(../icons/t-edit.png) no-repeat center;
  height: 32px;
  left: 0;
  opacity: 0.4;
  position: absolute;
  top: -32px;
  width: 32px;
}

div.x2-field-container:hover {
  outline: 1px dotted;
}

div.x2-field:hover form button.x2-edit-block {  opacity: 0.8;
}

div.x2-field form button.x2-edit-block:hover {  opacity: 1;
}

div#x2-field-editor {  background: #f0f0f0;
  display: none;  height: 300px;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 999994;
}

body.editor div#x2-field-editor {
  display: block;
}

#x2-field-editor-markup {  font-family: 'Courier New', Courier, monospace;
  font-size: 80%;  height: 100%;  width: 100%;}

#x2-debug-top,
#x2-debug {  display: none;
  position: fixed;
  right: 60px;
  z-index: 999995;
  width: 500px;}

#x2-debug form {  margin: 8px 12px 12px 8px;
  padding: 1em;
}

#x2-debug form textarea {  font-family: 'Courier New', Courier, monospace;
  font-size: 80%;
  height: 400px;  width: 100%;}

#x2-debug form input {
  font: Menu;
}

body.debug div#x2-debug,
body.debug div#x2-debug-top {
  display: block;
}

body.debug div#x2-debug {
  background: transparent url(../icons/dialog-bg.png) no-repeat left bottom;
  top: 10px;
}
body.debug div#x2-debug-top {
  background: transparent url(../icons/dialog-bg.png) no-repeat left top;
  height: 8px;
  top: 2px;
}